* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 10px;
    overflow: overlay;
    background-color: #030912;
}

::-webkit-scrollbar-thumb {
    background-color: #e6eeed;
}

.home {
    background-color: #152021;
    overflow: hidden;
}

.tabs {
    position: fixed;
    top: 20%;
    right: 0px;
    width: 220px;
    z-index: 999;

    .tab {
        height: 100vh;
        background-repeat: no-repeat;
        background-image: url('@/assets/image/side-nav.png');
        background-position: 0 3px;
        transition: all 0.45s;
        height: 80px;
    }

    .active {
        background-image: url('@/assets/image/side-nav-on.png');
    }
}

.homeVideo {
    width: 100vw;

    .logo {
        background-image: url('@/assets/image/logo.png');
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 30px;
        top: 12px;
        height: 100px;
        width: 100px;
    }

    .border {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-size: 100% 100%;
        background-image: url('@/assets/image/header-modify.png');
    }

    .title {
        width: 600px;
        height: 250px;
        background-image: url('@/assets/image/slogan.png');
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }

    video {
        width: 100vw;
        object-fit: cover;
        height: 100vh;
        min-height: 700px;
    }
}

.videos {
    position: relative;
    width: 100vw;
    height: 700vh;

    .logo {
        width: 83px;
        height: 121px;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 1;
        background-image: url('@/assets/image/sign.png');
        background-size: cover;
    }

    .name {
        width: 800px;
        height: 400px;
        position: absolute;
        top: -40px;
        left: 20px;
        z-index: 1;
        background-image: url('@/assets/image/shrink1.png');
        background-size: cover;
    }

    .introduction {
        >div {
            position: absolute;
            z-index: 1;
        }

        .title {
            width: 244px;
            height: 28px;
            top: 300px;
            background: url('@/assets/image/tip-title.png') no-repeat;
        }

        .BigName {
            background: url('@/assets/image/font.png') no-repeat;
            width: 255px;
            height: 134px;
            background-position: 0 -34px;
            margin-top: 15px;
            top: 340px;
        }

        .type {
            background: url('@/assets/image/ico-cs.png') no-repeat 100% 100%;
            width: 98px;
            height: 50px;
            top: 370px;
            left: 280px;
        }

        .link {
            cursor: pointer;
            color: #fff;
            top: 510px;
            border-bottom: 1px solid #fff;

        }

        .money {
            top: 550px;
            display: flex;
            height: 150px;

            .sale {
                margin-top: 40px;
                text-align: center;
                vertical-align: 16px;
                background: url('@/assets/image/font.png') no-repeat;
                padding-top: 10px;
                color: #bdbebe;
                background-position: -258px 0;
                width: 18px;
                height: 100%;
                font-size: 16px;
            }

            .number {
                background-image: linear-gradient(#f2ef79 20%, #a49245 80%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 108px;
            }
        }
    }
}

.hero {
    position: absolute;
    width: 100vw;
    object-fit: cover;
    height: 100vh;
    min-height: 700px;
}

@media (max-width: 800px) {
    .videos {
        .hero {
            width: 1300px;
            left: -500px;
        }
    }
}

@media (min-width: 1800px) {
    .videos {
        width: 100vw;

        .hero {
            height: 100vh+40px;
            top: 40px;
        }
    }
}